<template>
  <div>
    <div class="FeedbackHelp_die">
      <p></p>
      <div>
        <div>
          <!-- <p>所在城市</p>
          <div>
            <p>
              <picker @change="(e) =>bindPickerChange(e,0)" :range="shengArr" mode="selector">
                <div class="picker">{{info_province}}</div>
              </picker>
            </p>
            <p>
              <picker @change="(e) =>bindPickerChange(e,1)" :range="shiArr" mode="selector">
                <div class="picker">{{info_city }}</div>
              </picker>
            </p>
            <p>
              <picker @change="(e) =>bindPickerChange(e,2)" :range="xianArr" mode="selector">
                <div class="picker">{{info_county }}</div>
              </picker>
            </p>
          </div>-->
          <p></p>
          <div></div>
          <div>
            <span>手机号</span>
            <input
              type="text"
              name
              id
              v-model.lazy="yonghuname"
              @blur="blueinp"
              maxlength="11"
              placeholder="请输入手机号"
              placeholder-class="placeholder"
            />
          </div>
          <div>
            <p>填写内容</p>
            <textarea
              name
              id
              cols="30"
              rows="10"
              maxlength="200"
              :value="contentJvba"
              @input="input"
              placeholder-class="placeholder"
            ></textarea>
            <p>最多可输入{{contentJvbalength}}字</p>
          </div>
          <div></div>
        </div>
        <div>
          <div class="tijiao" @click="tijiao">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      getareasSheng: [],
      getareasSshi: [],
      getareasXian: [],
      shengArr: [],
      shiArr: [],
      xianArr: [],
      info_province: "选择省",
      info_city: "选择市",
      info_county: "选择区/县",
      yonghuname: "",
      contentJvba: "",
      headerCode: "",
      falses: true,
      contentJvbalength: 200
    };
  },
  onShow() {
    //  获取省份
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getareas",
      method: "post",
      success: res => {
        if (res.data.code == 200) {
          this.getareasSheng = res.data.data;
          this.getareasSheng.forEach(element => {
            this.shengArr.push(element.city_name);
          });
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
    // 获取toktn
    this.headerCode = "Bearer " + wx.getStorageSync("koken");
  },
  methods: {
    // 选择省市区
    bindPickerChange(e, i) {
      var city_pid;
      if (i == 0) {
        this.info_province = this.shengArr[e.mp.detail.value];
        city_pid = this.getareasSheng[e.mp.detail.value].city_id;
      } else if (i == 1) {
        this.info_city = this.shiArr[e.mp.detail.value];
        city_pid = this.getareasSshi[e.mp.detail.value].city_id;
      } else {
        this.info_county = this.xianArr[e.mp.detail.value];
        city_pid = this.getareasXian[e.mp.detail.value].city_id;
        return;
      }
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/getareas",
        method: "post",
        data: {
          city_pid: city_pid
        },
        success: res => {
          if (res.data.code == 200) {
            if (i == 0) {
              this.getareasSshi = res.data.data;
              this.getareasSshi.forEach(element => {
                this.shiArr.push(element.city_name);
              });
            } else if (i == 1) {
              this.getareasXian = res.data.data;
              this.getareasXian.forEach(element => {
                this.xianArr.push(element.city_name);
              });
            } else {
            }
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    tijiao() {
      if (!this.falses) {
        wx.showToast({
          title: "手机号格式不正确！",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else {
        setTimeout(() => {
          wx.request({
            url: "https://api.zhaoshengku.net/index/form/addproposal",
            method: "post",
            data: {
              proposal_contact: this.yonghuname,
              proposal_content: this.contentJvba,
              images: []
            },
            header: {
              Authorization: this.headerCode,
              "X-Requested-With": "xmlhttprequest"
              // "content-type": "application/x-www-form-urlencoded"
            },
            success: res => {
              if (res.data.code == 200) {
                this.yonghuname = "";
                this.contentJvba = "";
                wx.showToast({
                  title: "反馈成功！",
                  icon: "true",
                  duration: 1000
                });
              } else if (res.data.code == 99) {
                wx.showToast({
                  title: "您没有相关权限！",
                  icon: "none",
                  duration: 1000
                });
              } else if (res.data.code == 50001) {
                wx.showToast({
                  title: "没有找到相关用户！",
                  icon: "none",
                  duration: 1000
                });
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }, 100);
      }
    },
    input(e) {
      this.contentJvba = e.mp.detail.value;
      this.contentJvbalength = 200 - this.contentJvba.length;
    },
    blueinp() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.yonghuname)) {
        wx.showToast({
          title: "手机号格式不正确！",
          icon: "none",
          duration: 1000,
          mask: true
        });
        this.falses = false;
      } else {
        this.falses = true;
      }
    }
  },
  mounted() {
    // 设置头
    wx.setNavigationBarTitle({
      title: "反馈与帮助"
    });
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  }
};
</script>

<style scoped>
.FeedbackHelp_die > p:nth-child(1) {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
}
.FeedbackHelp_die > div:nth-child(2) {
  background: #fff;
  padding: 0 30rpx;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > p:nth-child(1) {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  height: 80rpx;
  line-height: 80rpx;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(2)
  p
  div {
  font-size: 13px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  display: inline-block;
  width: 200rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-bottom: 2rpx solid #dddddd;
  text-align: center;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
  border-bottom: 1px solid #dddddd;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(3)
  span {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  margin-right: 20rpx;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) img {
  /* transform: rotate(-90deg); */
  width: 12rpx;
  height: 22rpx;
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(3)
  input {
  flex: 1;
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  height: 45rpx;
  line-height: 45rpx;
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(4)
  > p:nth-child(1) {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(4)
  > textarea {
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 16px;
  border: 1rpx solid #dcdcdc;
  width: 100%;
  padding: 23rpx;
  height: 300rpx;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > div:nth-child(4) {
  position: relative;
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(4)
  > p:last-child {
  font-size: 11px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 16px;
  position: absolute;
  right: 10rpx;
  bottom: -40rpx;
}
.FeedbackHelp_die
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(5)
  > img {
  width: 100%;
  height: 98rpx;
}
.FeedbackHelp_die > div:nth-child(2) > div:nth-child(1) > div:nth-child(5) {
  margin-top: 400rpx;
  margin-bottom: 150rpx;
}
.tijiao {
  width: 668rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  background: url("http://www.zhaoshengku.net/wx-yuanjiao%20.png") center center
    no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  color: #fff;
  margin-top: -100rpx;
}
.placeholder {
  color: #999;
}
</style>
